<template>
  <div class="user">
    <div class="my_table">
      <el-table stripe border v-loading="isLoading" :data="tableList">
        <el-table-column label="标题" prop="title" />
        <el-table-column label="简介" prop="title" />
        <el-table-column
          label="详情"
          prop="content"
          :show-overflow-tooltip="true"
        >
          <template v-slot="scope">
            <div v-html="scope.row.content" />
          </template>
        </el-table-column>
        <el-table-column
          label="价格"
          prop="price"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="预约时间"
          align="center"
          prop="createTime"
          width="160"
        >
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.buyTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="120px">
          <template v-slot="scope">
            <el-button type="primary" link @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { parseTime } from "@/utils/utils";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ShopItem } from "@/api/shop/shop";
import { delCart, getCartList } from "@/db/cart";
import { useUserStoreHook } from "@/store/modules/user";
onMounted(() => {
  getList();
});
const isLoading = ref(false);
const tableList = ref<any[]>([]);
const getList = async () => {
  isLoading.value = true;
  const res = await getCartList(useUserStoreHook().userId);
  isLoading.value = false;
  tableList.value = res;
};

// 删除
const del = (item: ShopItem) => {
  ElMessageBox.confirm("您确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    await delCart(item.id);
    ElMessage({
      type: "success",
      message: "删除成功"
    });
    getList();
  });
};
</script>
